<template>
  <div class="c1">大家好</div>
  <p>孙悟空</p>
  <hr>
  页面跳转:
  <input type="text" v-model="page"> {{ page }}
  <hr>
  买东西：
  单价：<input type="text" v-model="price">
  <hr>
  数量：<input type="text" v-model="num">
  <hr>
  总价：{{total}}元
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';

const page = ref(3)
//默认，初始化不走逻辑
// watch(page,(newVal,oldVal)=>{
//   console.log(newVal,oldVal);
// })
watch(page,(newVal,oldVal)=>{
  console.log(newVal,oldVal);
},{immediate:true})

console.log('=======');
const price = ref(2);
const num = ref(3);
const total = ref(0);
watchEffect(()=>{
  // let total = price.value * num.value;
  // console.log(total);
  total.value = price.value * num.value;
})
</script>

<style scoped>
.c1{height: 100px;width: 100px;background-color: pink;transition: all 0.5s;}
.c1:hover{transform: scaleY(0.5);}
</style>